<template>
  <el-card class="box-card">
    <!-- 搜索与添加区域 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输入书名" v-model="bookName.bookTitle">
          <el-button slot="append" icon="el-icon-search" @click="findAll()"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addButton()">添加</el-button>
      </el-col>
    </el-row>



    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="bookId" label="编号" style="width: 30%">
      </el-table-column>
      <el-table-column prop="bookTitle" label="书名" style="width: 30%">
      </el-table-column>
      <el-table-column prop="bookAuthor" label="作者" style="width: 30%">
      </el-table-column>
      <el-table-column prop="bookPublisher" label="出版社" style="width: 30%">
      </el-table-column>
      <el-table-column prop="categoryName" label="类别" style="width: 30%">
      </el-table-column>
      <el-table-column prop="bookInventory" label="库存" style="width: 30%">
      </el-table-column>
      <el-table-column lable="操作" style="width: 25%">
        <template slot-scope="scope">
          <!-- 修改按钮 -->
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateById(scope.row)"></el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 page-size当前显示多少页  total显示总条数 current-page当前页-->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
      :page-sizes="[1, 3, 5, 7]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>




    <!-- 对话框组件 :visible.sync控制对话款是否显示 -->
    <el-dialog title="" :visible.sync="addDialogVisible" width="30%" :before-close="clear">

      <el-form :model="addbook" label-width="70px">

        <el-form-item label="书名" prop="text">
          <el-input v-model="addbook.bookTitle"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="text">
          <el-input v-model="addbook.bookAuthor"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="text">
          <el-input v-model="addbook.bookPublisher"></el-input>
        </el-form-item>
        <el-form-item label="类别ID" prop="text">
          <el-select v-model="addbook.categoryId" placeholder="请选择类别">
            <div v-for="item in categoryList" :key="item.categoryId">
              <el-option :label="item.categoryName" :value="item.categoryId"></el-option>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="库存" prop="text">
          <el-input v-model="addbook.bookInventory"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="clear()">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </span>
    </el-dialog>






  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      bookName: { "bookTitle": "" },
      addbook: { "bookTitle": "", "bookAuthor": "", "bookPublisher": "", "categoryId": "", "bookInventory": "" },
      addDialogVisible: false,
      page: 1,
      total: 0,
      currentpage: 1,
      categoryList: []
    }
  },
  created() {
    this.findAll()
  },
  methods: {
    async findAll() {
      this.bookName.page = 1
      this.page = 1
      const { data: res } = await this.$http.post('/book/findAll', this.bookName)
      this.tableData = res;
      this.tableData = res.dataList
      this.total = res.count
    },
    async handleCurrentChange(v) {
      this.bookName.page = v
      this.page = v
      const { data: res } = await this.$http.post('/book/findAll', this.bookName)
      this.tableData = res.dataList
      this.total = res.count

    },
    async handleSizeChange(v) {
      this.bookName.size = v
      this.bookName.page = 1
      this.page = 1
      const { data: res } = await this.$http.post('/book/findAll', this.bookName)
      this.tableData = res.dataList
      this.total = res.count
    },
    // 获取分类列表
    async getCategoryList() {
      // 获取分类列表
      const { data: res1 } = await this.$http.post('/category/select')
      this.categoryList = res1
    },
    // 添加按钮
    addButton() {
      this.getCategoryList()

      this.addDialogVisible = true
    },
    async save() {
      if (this.addbook.bookId == undefined) {
        const { data: res } = await this.$http.post('/book/save/', this.addbook, {})
        if (res.code == "200") {
          this.$message.success(res.message)
        }
      } else {
        const { data: res } = await this.$http.post('/book/update/', this.addbook, {})
        if (res.code == "200") {
          this.$message.success(res.message)
        }
      }
      this.addDialogVisible = false;
      this.addbook = { "bookTitle": "", "bookAuthor": "", "bookPublisher": "", "categoryId": "", "bookInventory": "" }
      this.findAll()
    },
    async updateById(currentRow) {
      this.getCategoryList()

      const { data: res } = await this.$http.get('/book/findById/' + currentRow.bookId, {})
      this.addbook = res
      this.addDialogVisible = true
    },
    async deleteById(currentRow) {
      const confirmResult = await this.$confirm('此操作将永久删除该图书信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error =>
        error
      )
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      const { data: res } = await this.$http.get('/book/delete/' + currentRow.bookId, {})
      if (res.code == "200") {
        this.$message.success(res.message)
      }
      this.findAll()
    },
    clear() {
      this.addDialogVisible = false
      this.addbook = { "bookTitle": "", "bookAuthor": "", "bookPublisher": "", "categoryId": "", "bookInventory": "" }
      this.findAll()
    }
  }
}
</script>

<style></style>